<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/base">
<head>
	<title>用户管理</title>
</head>

<body>

	<!-- Page header -->
	<div class="page-header" layout:fragment="page-header">
		<div class="page-header-content">
			<div class="page-title">
				<h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold" th:text="#{web.name}">管理系统</span> - 用户管理</h4>
			</div>
		</div>
	</div>
	<!-- /page header -->


	<!-- Main content -->
	<div class="content-wrapper" layout:fragment="content">

		<!-- Table -->
		<div class="panel panel-flat min-panel">
			<div class="panel-heading">
				<h5 class="panel-title text-primary"><i class="icon-users" />用户列表</h5>
        	</div>

        	<div class="panel-body">
        			<form id="query" action="#" class="form-horizontal">
						<div class="row">
							<div class="col-md-2">
								<div class="form-group">
									<label class="col-lg-3 control-label">姓名:</label>
									<div class="col-lg-7">
										<input type="text" name="name" class="form-control" placeholder="姓名 模糊查询" />
									</div>
								</div>
							</div>

							<div class="col-md-2">
								<div class="form-group">
									<label class="col-lg-3 control-label">手机:</label>
									<div class="col-lg-7">
										<input type="text" name="mobile" class="form-control" placeholder="手机 模糊查询" />
									</div>
								</div>
							</div>

							<div class="col-md-2">
								<div class="form-group">
									<label class="col-lg-3 control-label">角色:</label>
									<div class="col-lg-7">
										<select name="roleName" class="select form-control input-xs">
												<option value="">全部</option>
												<option th:each="role : ${roles}" th:value="${role.name}" th:text="${role.name}">时</option>
										</select>
									</div>
								</div>
							</div>

							<!--<div class="col-md-2">-->
								<!--<div class="form-group">-->
									<!--<label class="col-lg-3 control-label">类型:</label>-->
									<!--<div class="col-lg-7">-->
										<!--<select name="type" class="select form-control input-xs">-->
											<!--<option value="">全部</option>-->
											<!--<option th:each="type:${userTypes}"-->
													<!--th:value="${type.value}"-->
													<!--th:text="${type.name}"></option>-->
										<!--</select>-->
									<!--</div>-->
								<!--</div>-->
							<!--</div>-->

							<div class="col-md-3 ">
								<div class="form-group">
									<button type="button" id="submit" class="btn btn-primary">查询 <i class="icon-search position-right"></i></button>
									<button type="button" class="btn btn-primary btn-add" data-toggle="modal" data-target="#edit_dialog">新增<i class="icon-user-plus position-right"></i></button>
									<!--<button type="button" class="btn btn-primary btn-add">导入<i class="icon-user-plus position-right"></i></button>-->
								</div>
							</div>
						</div>
        			</form>
				<table class="table datatable-basic table-striped table-hover">
					<thead>
						<tr class="bg-primary">
							<th>姓名</th>
							<!--<th>性别</th>-->
							<th>手机号</th>
							<!--<th>QQ</th>-->
							<!--<th>微信</th>-->
							<th>邮箱</th>
							<!--<th>邀请码</th>-->
							<!--<th>城市</th>-->
							<!--<th>用户类型</th>-->
							<!--<th>行业</th>-->
							<th>操作</th>
						</tr>
					</thead>
					<tbody class="border-dashed">
						
					</tbody>
				</table>
			</div>
			<div id="edit_dialog" class="modal fade in">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">×</button>
							<h5 class="modal-title text-primary">编辑用户</h5>
						</div>

						<form action="#" id="edit">
							<div class="modal-body">
								<div class="form-group">
									<label>名称<span class="text-danger">*</span></label>
									<input name="id" type="text" style="display:none"/>
									<input name="name" type="text" placeholder="姓名" class="form-control" required="true"/>
								</div>

								<div class="form-group">
									<label>手机</label>	
									<input name="mobile" type="text" placeholder="手机" class="form-control" number="true" maxlength="11"/>
								</div>
								
								<div class="form-group">
									<label>邮箱</label>	
									<input name="email" type="text" placeholder="邮箱" class="form-control" email="true" maxlength="20"/>
								</div>

								<div class="form-group">
									<label>角色<span class="text-danger">*</span></label>	
									<select name="roleId" class="select form-control input-xs">
										<option th:each="role : ${roles}" th:value="${role.id}" th:text="${role.name}"></option>
									</select>
								</div>
								
								
							</div>
								
							<div class="modal-footer">
								<button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
								<button type="button" id="submitEdit" class="btn btn-primary" >保存</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script type="text/templete" id="btnGroup">
			<div class="btn-group" data-toggle="buttons">
            	<button type="button" class="btn bg-slate btn-icon btn-edit"  data-toggle="modal" data-target="#edit_dialog"><i class="icon-wrench"></i></button>
                <button type="button" class="btn bg-danger btn-icon  btn-del" title="删除"><i class="icon-cross"></i></button>
                <button type="button" class="btn bg-info btn-icon  btn-reset" title="重置密码"><i class="icon-key"></i></button>
			</div>
		</script>
		<!-- /table -->
		<script th:inline="javascript">
            var userTypes = /*[[${userTypes}]]*/ null;
            var majors = /*[[${majors}]]*/ null;
		</script>
		<script type="text/javascript" th:src="@{/oss/js/user.js}"></script>

	</div>
	<!-- /main content -->

</body>
</html>
